<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 的 background-origin 属性</title>
    <style>
        /* background-origin 属性指定了背景图像的位置区域。 */
        /* content-box, padding-box,和 border-box区域内可以放置背景图像。 */

        /* 在 content-box 中定位背景图片： */
        div {
            border: 1px solid black;
            padding: 35px;
            background-image: url('images/smiley.gif');
            background-repeat: no-repeat;
            background-position: left;
        }

        #div1 {
            background-origin: border-box;
        }

        #div2 {
            background-origin: content-box;
        }
    </style>
</head>

<body>

    <p>背景图像边界框的相对位置：</p>
    <div id="div1">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

    <p>背景图像的相对位置的内容框：</p>
    <div id="div2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </div>

</body>

</html>